<template>
  <div style="overflow-y: scroll" :style="{ height: clientHeight - 200 + 'px' }">
    <el-tree style="width: 240px; padding-right: 20px" ref="popularTree" :data="terrList" node-key="id"
             :props="defaultProps" highlight-current :default-expanded-keys="defaultExpandedKeys"
             @node-click="handleNodeClick">
      <template #default="{ node }">
        <p v-if="node.data.fn === 't'" class="flex-center">
          <span>{{ node.label }}</span>
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-button type="text" size="small" style="padding: 0"
              >操作
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </el-button>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <p>
                  <el-button type="text" size="small" @click.stop="playlive(node.data)">播放</el-button>
                </p>
                <p>
                  <el-popconfirm title="确定清空?" @confirm="kxplayscheme(node.data.id)" @cancel="qx">
                    <template #reference>
                      <el-button type="text" size="small">清空</el-button>
                    </template>
                  </el-popconfirm>
                </p>
                <p>
                  <el-button type="text" size="small" @click="updateName(node.data)">修改名称</el-button>
                </p>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </p>
        <p v-else class="flex-center-p">
          <el-image v-if="node.data.cameraType === 'ball'" class="icon-img" src="/tree/ball.png"></el-image>
          <el-image v-else-if="node.data.cameraType === 'gun'" class="icon-img" src="/tree/gun.png"></el-image>
          <span v-if="node.data.isOnline === 'f'" style="color: #c9c8c8">&nbsp;{{ node.label }}&nbsp;</span>
          <span v-else style="color: #2d6cf3">&nbsp;{{ node.label }}&nbsp;</span>
          <el-image v-if="node.data.isAlarm === 'f'" class="icon-img" src="/tree/f.png"></el-image>
          <el-image v-else-if="node.data.isAlarm === 't'" class="icon-img" src="/tree/t.png"></el-image>&nbsp;
          <!--            <span style="border-radius: 50%;background-color: #e75912;color: #ffffff;padding: 1px 4px;text-align: center">{{ node.data.winNum }}</span>-->
        </p>
      </template>
    </el-tree>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/service/baseService";
import {ElMessageBox} from "element-plus";

const defaultProps = {
  children: "children",
  winNum: "winNum",
  label: "addr"
};
export default defineComponent({
  setup() {
    const state = reactive({
      clientHeight: document.body.clientHeight,
      terrList: [],
      defaultProps,
      defaultExpandedKeys: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  created() {
    this.getSchemeList();
  },
  methods: {
    handleNodeClick(data) {
      if (data.type == undefined) {
        return;
      }
      data.dataType = "camera";
      this.$emit("hClick", data);
    },
    // 默认展开
    getAllKeys(nodes) {
      nodes.forEach((node) => {
        this.defaultExpandedKeys.push(node.id);
        if (node.children && node.children.length) {
          this.getAllKeys(node.children);
        }
      });
    },
    // 树数据请求
    getSchemeList() {
      baseService.get("/kxPlayScheme/kxplayscheme/getSchemeList").then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        let arr = [];
        res.data.forEach((item) => {
          if (item.children.length > 0) {
            item.children.forEach((value, index, array) => {
              array[index] = {
                fn: "f",
                ...value
              };
            });
          }
          arr.push({
            addr: item.name,
            fn: "t",
            ...item
          });
        });
        this.terrList = arr;
      });
    },
    playlive(data) {
      this.$emit("celloplayvideos", data);
    },
    // 清空
    kxplayscheme(id) {
      let ids = [id];
      baseService.delete("/kxPlayScheme/kxplayscheme", ids).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.$message.success("清空成功！");
        this.getSchemeList();
      });
    },
    qx() {
      WebVideoCtrl.I_ShowWnd();
    },
    updateName(row) {
      ElMessageBox.prompt("", "修改方案名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^\S{1,8}$/,
        inputErrorMessage: "不能为空，且名称长度不大于8位！"
      })
          .then(({value}) => {
            let dto = {
              id: row.id,
              name: value
            };
            baseService.put("/kxPlayScheme/kxplayscheme/updateName", dto).then((res) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message.success("修改成功！");
              this.getSchemeList();
            });
          })
          .catch(() => {
          });
    }
  }
});
</script>
<style scoped>
.flex-center {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center-p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-img {
  width: 16px;
  height: 16px;
}
</style>
